<template>
	<view>
		<block v-if="!boxHide">
			<view class="bar_top">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" v-model="search" placeholder="请输入关键词"/>
						<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
					</view>
					<view class="search_btn" @tap="getList(1)">搜索</view>
				</view>
				
				<view class="bar_list">
					<view class="bar_item" @tap="open('selBoxStatus',0,true)">
						<text :class="selBoxStatus && itemNum == 0 ? 'color_blue' : ''">{{item0[stock].name}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
					
					<view class="bar_item" @tap="open('selBoxStatus',1,true)">
						<text :class="selBoxStatus && itemNum == 1 ? 'color_blue' : ''">{{item1[type].name}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
					
					<view class="bar_item" @tap="open('selBoxStatus',2,true)">
						<text :class="selBoxStatus && itemNum == 2 ? 'color_blue' : ''">{{item2[warehouse_id].name}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</view>
			</view>
			
			<view class="product_list">
				<view class="product_item" v-for="(item,index) in list">
					<view class="product_item_content" :key="index">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="product_item_text">
							<view>{{ item.title }}</view>
							<view class="product_item_text_id">编号：{{ item.number }}</view>
							<view class="product_item_text_price">
								<text>¥{{ item.price }}</text><text>/个</text><text>共{{ item.stock }}个</text>
							</view>
						</view>
					</view>
					<view class="product_item_btn">
						<text @tap="go('edit',item.id,0)" v-if="checkPermission([60002])">库存调拨</text>
						<text @tap="go('edit',item.id,1)" v-if="checkPermission([60003])">调整入库价</text>
						<text @tap="see(item.id)" v-if="checkPermission([60004])">可用库存</text>
						<text @tap="del(item.id)" v-if="checkPermission([60005])">删除</text>
					</view>
				</view>
			</view>
			
			<image src="/static/images/product_add.png" class="product_add" v-if="!addBoxStatus&&(checkPermission([60006])||checkPermission([60007])||checkPermission([60008]))" @tap="open('addBoxStatus')"></image>
			
			<view class="window index999 window1" v-if="addBoxStatus">
				<view class="window_product">
					<view class="window_product_btn">
						<!-- <view class="window_product_btn_item" @tap="go('info',0,1)" v-if="checkPermission([60006])">
							<image src="/static/images/product_icon1.png" mode="aspectFit"></image>
							<view>销售应发货</view>
						</view> -->
						<view class="window_product_btn_item" @tap="go('add',0,1)" v-if="checkPermission([60006])">
							<image src="/static/images/product_icon1.png" mode="aspectFit"></image>
							<view>新增产品</view>
						</view>
						<view class="window_product_btn_item" @tap="go('out',0,1)" v-if="checkPermission([60007])">
							<image src="/static/images/product_icon2.png" mode="aspectFit"></image>
							<view>新增出库单</view>
						</view>
						<view class="window_product_btn_item" @tap="go('push',0,1)" v-if="checkPermission([60008])">
							<image src="/static/images/product_icon3.png" mode="aspectFit"></image>
							<view>新增入库单</view>
						</view>
					</view>
					
					<image src="/static/images/deletet.png" class="window_product_btn_del" @tap="open('addBoxStatus')"></image>
				</view>
			</view>
			
			<view class="window index999" v-if="repertoryBoxStatus">
				<view class="window_flex">
					<view class="product_repertory">
						<view class="product_repertory_title">可用库存</view>
						<view class="product_repertory_item">主库存(实际): {{productStock.stock}}</view>
						<view class="product_repertory_item">销售未出库：{{productStock.sales_not_stock}}</view>
						<view class="product_repertory_item">总可用库存：{{productStock.real_stock}}</view>
						<view class="product_repertory_item">入库单在途：{{productStock.into_not_stock}}</view>
						<view class="product_repertory_btn" @tap="open('repertoryBoxStatus')">确定</view>
					</view>
				</view>
			</view>
			
			<view class="window index997" v-if="selBoxStatus">
				<view class="client_bg" @tap="open('selBoxStatus')"></view>
				<view class="client_sel">
					<block v-for="(item,index) in sel">
						<view class="client_sel_item" @tap="selItem(index)" :key="index">
							<view>{{item.name}}</view>
							<image src="/static/images/select.png" v-if="item.status"></image>
						</view>
					</block>
				</view>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../components/loading/loading.vue"
	export default{
		components:{
			Loading
		},
		data(){
			return{
				itemNum:0,
				selBoxStatus:false,
				addBoxStatus:false,
				repertoryBoxStatus:false,
				list: [],
				sel:[],
				item0:[{name:"全部库存",status:false},{name:"无库存",status:false},{name:"有库存",status:false}],
				item1:[{name:"全部类型",status:false}],
				item2:[{name:"全部仓库",status:false}],
				stock:0,
				type:0,
				warehouse_id:0,
				search:"",
				loading:true,
				productStock:{},
				showEmptyBtn:false,
			}
		},
		onLoad(options) {
			this.$api.getProductLibrary({page:this.page}).then(res => {
				for(let i in res){
					let a = {status:false};
					a.name = res[i].title;
					a.id = res[i].id;
					this.item2.push(a)
				}
			})
			this.$api.getProductType({page:this.page}).then(res => {
				for(let i in res){
					let a = {status:false};
					a.name = res[i];
					this.item1.push(a)
				}
			})
		},
		onShow() {
			if(this.$app.globalData.upData.product){
				this.getList(1)
			}
		},
		onReachBottom() {
			if(this.loading){
				this.getList(3)
			}
		},
		onUnload() {
			this.$app.globalData.upData.product = true
		},
		methods:{
			emptyValue(){
				this.search='';
				this.getList(1);
			},
			getList(type){
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.boxHide = false;
					if(type == 1){this.list = [];this.page = 1;this.loading = true;this.$app.globalData.upData.product = false}
					let upJson = {search:this.search,page:this.page}
					if(this.stock > 0) upJson.stock = this.stock - 1
					if(this.type > 0) upJson.type = this.item1[this.type].name
					if(this.warehouse_id > 0) upJson.warehouse_id = this.item2[this.warehouse_id].id
					this.$api.getProductList(upJson).then(res => {
						this.$refs.load.getLoadingData({oldData:this.list,newData:res.data}).then(res => {
							this.list = res.list; 
							this.loading = res.loading;
							this.page ++;
						});
					})
				})
			},
			selItem(index){//选择分类栏
				this.open("selBoxStatus");
				let arr = this['item' + this.itemNum];
				for(let i in arr){
					if(i == index){
						arr[i].status = true;
					}else{
						arr[i].status = false;
					}
				}
				this.itemNum == 0 ? this.stock = index : this.itemNum == 1 ? this.type = index : this.warehouse_id = index
				this.getList(1);
			},
			open(obj,index,status){//打开窗口
				if(index != undefined){
					if(index == this.itemNum && this[obj]) this[obj] = !this[obj];
					else this[obj] = status;
					this.sel = this["item" + index];
					this.itemNum = index;
				}else{
					this[obj] = !this[obj];
				}
			},
			see(id){//查看库存信息
				this.$api.getProductStock({product_id:id}).then(res =>{
					this.productStock = res;
					this.open("repertoryBoxStatus")
				})
			},
			go(obj,id,type,price){//页面跳转
				if(this.addBoxStatus) this.addBoxStatus = !this.addBoxStatus;
				uni.navigateTo({
					url:"/pages/product/" + obj + "/" + obj + "?id=" + id + "&type=" + type
				})
			},
			del(id){//删除
				uni.showModal({
					content:"确认删除这件产品吗？",
					success:res => {
						if(res.confirm){
							this.$api.deleteProduct({id}).then(res =>{
								uni.showToast({title:"删除成功",icon:"none",mask:true,duration:2000,success:res => {
									setTimeout(res =>{
										this.getList(1)
									},2000)
								}})
								
							})
						}
					}
				})
			}
		},
		watch:{
			search(val){
				this.showEmptyBtn=val==""?false:true;
			}
		}
	}
</script>

<style>
	.product_list{width: 100%;margin-top: 230upx;}
	.product_item{width: 690upx;background: #FFFFFF;border-radius: 8upx;margin:30upx 0 0 30upx;}
	.product_item_content{display: flex;flex-direction: row;align-items: center;padding: 30upx;box-sizing: border-box;font-size: 30upx;color: #333333;}
	.product_item_content image{width: 134upx;height: 134upx;border-radius: 8upx;background: #EEEEEE;margin-right: 20upx;}
	.product_item_text_id{font-size: 24upx;color: #9BA7B7;margin: 10upx 0;}
	.product_item_text_price{font-size: 30upx;color: #ED3737;}
	.product_item_text_price text:nth-child(2){color: #333333;}
	.product_item_text_price text:nth-child(3){color: #9BA7B7;font-size: 24upx;margin-left: 20upx;}
	.product_item_btn{display: flex;flex-direction: row;width: 100%;border-top: 2upx solid #EEEEEE;font-size: 26upx;color: #049BFF;line-height: 80upx;text-align: center;}
	.product_item_btn text{width: 25%;border-right: 2upx solid #EEEEEE;}
	.product_item_btn text:nth-child(4){color: #666666;border-right: 0upx solid #EEEEEE;}
	
	.product_add{position: fixed;width: 228upx;height: 228upx;bottom: 0;right: 0;z-index: 996;}
	.window1{background:rgba(255,255,255,0.8);}
	.window_product{position: absolute;width: 100%;bottom: 0;left: 0;}
	.window_product_btn{display: flex;flex-direction: row;align-items: center;font-size: 26upx;color: #333333;justify-content: space-around;}
	.window_product_btn_item{text-align: center;width: 33%;}
	.window_product_btn_item image{width: 60upx;height: 60upx;margin: auto;margin-bottom: 15upx;}
	.window_product_btn_del{width: 50upx;height: 50upx;margin: 70upx 0 50upx 350upx;}
	
	.product_repertory{width: 540upx;background: #FFFFFF;padding-top: 40upx;text-align: center;}
	.product_repertory_title{font-size: 36upx;color: #333333;}
	.product_repertory_item{font-size:28upx;color: #333333;margin-top: 20upx;}
	.product_repertory_btn{font-size: 34upx;color: #108EE9;line-height: 100upx;border-top: 2upx solid #EEEEEE;margin-top: 30upx;}
	
	.client_sel{width: 100%;background: #FFFFFF;position: absolute;left: 0;top:198rpx;}
	.client_sel_item{width: 690upx;padding: 0 40upx;height: 80upx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;font-size: 30upx;color: #333333;}
	.client_sel_item image{width: 30upx;height: 20upx;}
</style>
